<template>
  <div id="singerRank">
    <el-row>
      <el-col :xs="24" :sm="24" :md="24" :lg="24" :xl="24">
        <p class="hd-title">云音乐歌手榜</p>
        <div class="tag-content">
          <ul class="tag">
            <li
              v-for="(item, index) in tag"
              :key="index"
              :class="{ active: tagBool === index }"
              @click="tagBool = index; tab(item.type)"
            >
              {{ item.name }}
            </li>
          </ul>
          <p class="up-time">
            更新时间：{{ (new Date(singerRank.updateTime).getMonth() + 1)<10?"0"+(new Date(singerRank.updateTime).getMonth() + 1) :new Date(singerRank.updateTime).getMonth() + 1 }}月{{
             ( new Date(singerRank.updateTime).getDate())<10?"0"+ new Date(singerRank.updateTime).getDate(): (new Date(singerRank.updateTime).getDate())
            }}日
          </p>
        </div>
        <el-divider class="line"></el-divider>
        <ul class="rank-top">
            <li v-for="(item, index) in singerRank.artists" :key="index" v-if="index<3">
                <div class="left">
                    <p class="num">{{index+1}}</p>
                    <p class="name">{{item.name}}</p>
                    <p class="score">热度：{{item.score}}</p>
                </div>
                <div class="images">
                    <img :src="item.img1v1Url" alt="">
                </div>
            </li>
        </ul>
        <ul class="rank">
            <li v-for="(item, index) in singerRank.artists" :key="index" v-if="index>2" >
                <div class="left">
                    <p class="num">{{index+1}}</p>
                <div class="images"><img v-lazy="item.img1v1Url" alt=""></div>
                <p class="name">{{item.name}}</p>
                </div>
                <p class="score">热度：{{item.score}}</p>
            </li>
        </ul>
      </el-col>
    </el-row>
  </div>
</template>

<script>
export default {
  name: "singerRank",
  data() {
    return {
      singerRank: {},
      tagBool: 0,
      tag: [
        {
          type: 1,
          name: "华语",
        },
        {
          type: 2,
          name: "欧美",
        },
        {
          type: 3,
          name: "韩国",
        },
        {
          type: 4,
          name: "日本",
        },
      ],
    };
  },
  created() {
    this.axios({
      method: "get",
      withCredentials: true,
      url:
        "https://music.hzbiz.net/toplist/artist?timetamp=" +
        new Date().getTime(),
      params: {
        type: 1,
      },
    }).then((res) => {
      this.singerRank = res.data.list;
      console.log("歌手排行", res.data);
    });
  },
  methods: {
      tab(index){
this.axios({
      method: "get",
      withCredentials: true,
      url:
        "https://music.hzbiz.net/toplist/artist?timetamp=" +
        new Date().getTime(),
      params: {
        type: index,
      },
    }).then((res) => {
      this.singerRank = res.data.list;
      console.log("歌手排行", res.data);
    });
      }
  },
};
</script>

<style scoped>
.hd-title {
  font-size: 20px;
  font-weight: bold;
  padding: 0 36px 20px 36px;
  color: #000;
}
.tag {
  padding: 0 36px;
  display: flex;
}
.tag li {
  margin-right: 20px;
  cursor: pointer;
}
.tag li.active {
  font-weight: bold;
}
.tag-content {
  display: flex;
  justify-content: space-between;
  padding-right: 30px;
}
.tag-content p.up-time{
    opacity: 0.5;
}
.line{
    margin: 10px 0;
}
.rank-top{
    padding: 10px 30px 20px 36px;
    display: flex;
    justify-content: space-between;
}
.rank-top li{
    height: 100px;
    width: 500px;
    display: flex;
    justify-content: space-between;
    align-items: center;
    background-color: #fafafa;
    border-radius: 5px;
    cursor: pointer;
        position: relative;
}
.rank-top li:hover{
    background-color: rgba(122, 121, 121, 0.1);
}
.rank-top li .images{
    width: 100px;
    height: 100%;
    border: 1px solid rgba(0, 0, 0, 0.1);
    border-radius: 5px;
    overflow: hidden;
}
.rank-top li .left{
    margin-left: 40px;
}
.rank-top li .left .score{
    margin-top: 10px;
    font-size: 12px;
    color: rgba(82, 82, 82, 0.5);
}
.rank-top li .left .num{
    position: absolute;
    top: 3px;
    left: 3px;
    font-size: 33px;
    color: rgb(247, 138, 138);
}
.rank li:nth-child(2n-1){
    background-color: #f5f5f5;
}
.rank li{
    padding: 10px 30px 10px 36px;
    display: flex;
    justify-content: space-between;
    cursor: pointer;
    align-items: center;
}
.rank li:hover{
    background-color: #e4e3e3;
}
.rank li .left{
    display: flex;
    align-items: center;
}
.rank li p.score{
    color: rgba(82, 82, 82, 0.5);
}
.rank li .images{
    width: 60px;
    height: 60px;
    overflow: hidden;
    border-radius: 5px;
    border: 1px solid rgba(0, 0, 0, 0.1);
    margin: 0 15px;
}
.rank li .num{
    width: 25px;
    color: rgba(82, 82, 82, 0.5);
    font-size: 15px;
}
</style>